<html>
	<head>
		<title>MimaView - Album</title>
		<link type="text/css" rel="stylesheet" href="/css/default.css" />
		<script type="text/javascript" src="/js/keycodes.js"></script>
		<script type="text/javascript" src="/js/album.js"></script>
		<script type="text/javascript">
			var images = [
{%	for image in images %}			"{{ image }}",
{% endfor %}
			];
		</script>
		<style type="text/css">
			a { color: #bbd }
		</style>
	</head>
	<body style="margin: 0; color: #fff; padding: 0; background: #000;" onload="Init()" onkeypress="OnKeyPress()">
		<div id="viewport" style="position: absolute; top: 0; left: 0; overflow: hidden; margin: 0; padding: 0">
			<img id="preload" style="position: absolute; top: 0; left: 0; margin: 0; padding: 0" />
			<div id="shutter" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000;"></div>
			<img id="image" style="position: absolute; top: 0; left: 0; margin: 0; padding: 0" onload="ImageOnLoad()" />
			<div id="popup" style="display: none; position: absolute; top: 3px; left: 3px; background: #333; border: 1px solid #999; font-size: 10px; padding: 3px;">
				<div id="imgInfo"></div>
				<div id="menu">
					<a href="javascript:GotoImage(0)">First</a><br />
					<a href="javascript:GotoImage(images.length - 1)">Last</a><br />
					<a href="javascript:NavtoImage()">Image</a><br />
					<a href="javascript:Reload()">Reload</a>
				</div>
				<div id="debug"></div>
			</div>
		</div>
    </body>
</html>
